<template>
  <div class="user-info">
    <el-avatar :size="50" :src="circleUrl" class="avatar" />
    <el-card class="info">
      <p class="name">{{ username }}</p><br>
      <el-button link @click="handleLogout">退出登录</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { useMapgisStore_hjh } from '@/stores/mapgis-hjh'
const mapgisStore_hjh = useMapgisStore_hjh()
const { handleLogout } = mapgisStore_hjh

const username = localStorage.getItem('username')
</script>

<style lang="scss" scoped>
.user-info {
  .info {
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 999;
    background-color: #fff;
    display: none;
  }
  &:hover .info {
    display: block;
  }
}

</style>
